<template>
  <div class="login-container" :style="{ height: clientHeight + 'px' }">
    <div class="mask"></div>
    <div class="qr_code">
      <p class="flex logo">
        <img src="@/assets/images/logo-login.png" />
      </p>
      <div class="flex tips">
        <p>为美而生</p>
        <p>因你而来</p>
      </div>
      <div class="qr_img">
        <img :src="qrCodeUrl" />
        <span>使用微信扫码登陆</span>
        <div class="download">
          <img src="@/assets/images/guge_logo.png" />
          <p>推荐使用谷歌浏览器<a href="https://www.google.cn/chrome/" target="_blank">(点击下载)</a></p>
        </div>
      </div>
    </div>
    <vueSeamlessScroll :data="loginImageList" :class-option="classOption" style="height: 100vh">
      <ul class="flex seamless-scroll">
        <li
          v-for="(item, index) in loginImageList"
          :key="index"
          :style="{ width: clientWidth / 3 + 'px', height: clientHeight + 'px' }"
        >
          <img :src="item" />
        </li>
      </ul>
    </vueSeamlessScroll>
  </div>
</template>

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
import { mapGetters } from "vuex";
export default {
  name: "Login",
  data() {
    return {
      loginForm: {
        username: "admin",
        password: "111111"
      },
      clientWidth: null,
      clientHeight: null,
      loginImageList: [
        require("@/assets/images/login_1.png"),
        require("@/assets/images/login_2.png"),
        require("@/assets/images/login_3.png"),
        require("@/assets/images/login_4.png"),
        require("@/assets/images/login_5.png"),
        require("@/assets/images/login_6.png")
      ],
      loading: false,
      timer: null,
      redirect: undefined //重定向地址--比如我从/product产品也 退出--然后在登录--我应该回到之前的页面
    };
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  async created() {
    // 1- 获取登录页的小程序码
    await this.$store.dispatch("user/getLoginQrcode");
    // 2 -轮询请求 用户信息
    this.pollingRequest(2000);
  },
  mounted() {
    this.clientWidth = document.body.clientWidth;
    this.clientHeight = document.body.clientHeight;
  },
  methods: {
    pollingRequest(time) {
      clearInterval(this.timer);
      this.timer = setInterval(async () => {
        const response = await this.$store.dispatch("user/getLoginStatus");
        if (response.status === 100) {
          if (response.data.status === 1005) {
            //token已过期或者不存在 请重新扫码
            this.$message({
              type: "error",
              message: response.data.statusDesc
            });
            clearInterval(this.timer);
          } else if (response.data.status === 1003) {
            this.$router.push({ path: this.redirect || "/" });
            clearInterval(this.timer);
          }
        }
      }, time);
      this.$once("hook:beforeDestroy", () => {
        clearInterval(this.timer);
      });
    }
  },
  computed: {
    ...mapGetters(["qrCodeUrl"]),
    classOption() {
      return {
        autoPlay: true,
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: this.loginImageList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: false, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      };
    }
  },
  components: {
    vueSeamlessScroll
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .mask {
    background: rgba(255, 59, 137, 0.8);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 6;
  }
  .btn {
    position: absolute;
    left: 0;
    z-index: 8;
  }
  .seamless-scroll {
    width: 100%;
  }
  .qr_code {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 7;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 29px;
    padding-bottom: 15px;
    .logo {
      img {
        height: 70px;
      }
    }
    .tips {
      margin-top: 30px;
      p {
        font-size: 40px;
        background-image: linear-gradient(to right, #39cdff, #f3c643);
        background-clip: text;
        color: transparent;
        &:nth-child(1) {
          margin-right: 50px;
        }
      }
    }
    .qr_img {
      margin-top: 42px;
      background: #ffffff;
      box-shadow: 2px 2px 30px 0px rgba(255, 65, 97, 0.4);
      border-radius: 26px;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      align-items: center;
      padding: 20px 23px 19px 23px;
      img {
        width: 300px;
        height: 300px;
      }
      span {
        width: 240px;
        height: 42px;
        font-size: 18px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ff4457;
        line-height: 61px;
        text-align: center;
        margin-bottom: 19px;
      }
    }
    .download {
      display: flex;
      align-items: center;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
      a {
        color: #7ea9ff;
        margin-left: 15px;
      }
    }
  }
}
</style>
